<template>
  <div class="forum-detail-wrap">
    <div class="head">
      <div class="head-left">
        <div class="breadcrumb">
          <div class="breadcrumb-item">
            <img src="@/assets/img/home.png" alt="" />
            <span>公告 > </span>
          </div>
          <div class="breadcrumb-item">
            <span>公告详情</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="title">
        <div class="title-left">
          <div class="title-desc u-line-1">{{ info.title }}</div>
        </div>
        <div class="title-right">
          <span style="color: #9fa6c2">{{ info.created_at }}</span>
        </div>
      </div>
      <div class="content">
        <div class="html" v-html="info.content"></div>

        <div class="file-info" v-if="info.link_url">
             下载附件：<a :href="info.link_url" target="_blank">
                {{ fileName }}
            </a>
        </div>
      </div>
    </div>

    <div class="m-bottom-empty"></div>
  </div>
</template>

<script>
import { getNotice } from "@/api/notice";
export default {
  components: {},
  data() {
    return {
      info: {},
      fileName: ''
    };
  },
  mounted() {
    this.getNoticeFun();
  },
  methods: {
    getNoticeFun() {
      getNotice({ id: this.$route.params.id }).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          if(this.info.link_url){
            let strArr = this.info.link_url.split('/')
            this.fileName = strArr[strArr.length - 1]
          } else {
            this.fileName = ''
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.html {
  font-size: 0.2rem;
  color: #000;
  line-height: 0.3rem;
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>

<style lang="less" scoped>
.forum-detail-wrap {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;

    .head-right {
      .push {
        text-align: center;
        line-height: 0.5rem;
        width: 1.5625rem;
        height: 0.5rem;
        background: #4f8af8;
        font-size: 0.2rem;
        color: #fff;
        border-radius: 0.1rem;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .card {
    border: 0.0125rem solid rgba(#64aefb, 0.1);
    border-radius: 0.0625rem;
    margin-bottom: 0.475rem;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 0.875rem;
      background: rgba(#64aefb, 0.1);
      border-top-left-radius: 0.0375rem;
      border-top-right-radius: 0.0375rem;
      padding: 0 0.5rem;

      .title-left {
        display: flex;
        align-items: center;
        width: 12.5rem;
      }

      .title-right {
        font-size: 0.2rem;
        color: #000;
        .push {
          text-align: center;
          line-height: 0.5rem;
          width: 1.5625rem;
          height: 0.5rem;
          background: #4f8af8;
          font-size: 0.2rem;
          color: #fff;
          border-radius: 0.1rem;
          cursor: pointer;
          user-select: none;
        }
      }

      .title-desc {
        font-size: 0.25rem;
        color: #000;
        line-height: 0.35rem;
        font-weight: 600;
      }

      .title-tip {
        width: 0.6rem;
        height: 0.3rem;
        background: #f18c3c;
        border-radius: 0.025rem;
        text-align: center;
        line-height: 0.3rem;
        font-size: 0.15rem;
        color: #ffffd2;
        margin-right: 0.25rem;
      }
    }

    .content {
      padding: 0.5rem;

      .content-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .content-top-left {
          font-size: 0.2rem;
          color: #000;
        }

        .content-top-right {
          display: flex;
          align-items: center;

          .item-content-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.2rem;
            color: #000;
            margin-left: 0.4rem;
            cursor: pointer;
            user-select: none;

            span {
              margin-right: 0.1rem;
            }

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.05rem;
            }
          }
        }
      }

      .html {
        font-size: 0.2rem;
        color: #000;
        line-height: 0.3rem;
        img {
          max-width: 100%;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      padding: 0.625rem 0 1rem;
    }
  }

  .m-bottom-empty {
    width: 100%;
    height: 0.875rem;
  }
}
</style>
